<template>
  <view style="width: 100vw;height: 100vh;" :style="{overflow:showPopup ? 'hidden' : 'auto'}">
    <H5Navbar :title="title"></H5Navbar>
    <view style="padding: 80rpx 20rpx 0 20rpx;width: 100%;height: 100%;box-sizing: border-box">
      <view style="margin-bottom: 30rpx">
        <view class="label-form required-label">客户状态</view>
        <u--input
            placeholder="请输入客户状态"
            border="bottom"
            :disabled="true"
            clearable
            v-model="formType.status"
        ></u--input>
      </view>
      <view style="margin-bottom: 30rpx">
        <view class="label-form required-label">项目名称</view>
        <view class="content-select" @click="openProjectName" style="font-size: 30rpx;padding: 0 18rpx 20rpx 18rpx;box-sizing: border-box">
          <text v-if="formType.projectName" style="color:rgb(48, 49, 51)">{{formType.projectName}}</text>
          <text v-else style="color:rgb(192, 196, 204)">请选择项目名称</text>
        </view>
      </view>
      <view style="margin-bottom: 30rpx">
        <view class="label-form required-label">跟进人</view>
<!--        @click="openFollowByName"-->
        <view class="content-select"  style="font-size: 30rpx;padding: 0 18rpx 20rpx 18rpx;box-sizing: border-box">
          <text v-if="formType.followByName" style="color:rgb(48, 49, 51)">{{formType.followByName}}</text>
          <text v-else style="color:rgb(192, 196, 204)">请选择跟进人</text>
        </view>
      </view>
      <view style="margin-bottom: 30rpx">
        <view class="label-form required-label">客户名称</view>
        <u--input
            placeholder="请输入客户名称"
            border="bottom"
            :disabled="typeMode == 2"
            clearable
            v-model="formType.customerName"
        ></u--input>
      </view>
<!--      客户类型-->
      <view style="margin-bottom: 30rpx">
        <view class="label-form required-label">客户类型</view>
        <view class="content-select" @click="openCustomerType" style="font-size: 30rpx;padding: 0 18rpx 20rpx 18rpx;box-sizing: border-box">
          <text v-if="formType.customerType" style="color:rgb(48, 49, 51)">{{formType.customerType}}</text>
          <text v-else style="color:rgb(192, 196, 204)">请选择客户类型</text>
        </view>
      </view>
      <view style="margin-bottom: 30rpx">
        <view class="label-form">客户行业</view>
        <view class="content-select" @click="openIndustry" style="font-size: 30rpx;padding: 0 18rpx 20rpx 18rpx;box-sizing: border-box">
          <text v-if="formType.customerIndustry" style="color:rgb(48, 49, 51)">{{formType.customerIndustry}}</text>
          <text v-else style="color:rgb(192, 196, 204)">请选择客户行业</text>
        </view>
      </view>
      <view style="margin-bottom: 30rpx">
        <view class="label-form required-label">联系人</view>
        <u--input
            :disabled="typeMode == 2"
            placeholder="请输入联系人"
            border="bottom"
            clearable
            v-model="formType.customerContact"
        ></u--input>
      </view>
      <view style="margin-bottom: 30rpx">
        <view class="label-form required-label">联系电话</view>
        <u--input
            placeholder="请输入联系电话"
            border="bottom"
            :maxlength="11"
            :disabled="typeMode == 2"
            clearable
            v-model="formType.customerPhone"
        ></u--input>
      </view>
      <view style="margin-bottom: 30rpx">
        <view class="label-form required-label">来访渠道</view>
        <view class="content-select" @click="openCustomerSource" style="font-size: 30rpx;padding: 0 18rpx 20rpx 18rpx;box-sizing: border-box">
          <text v-if="formType.customerSource" style="color:rgb(48, 49, 51)">{{formType.customerSource}}</text>
          <text v-else style="color:rgb(192, 196, 204)">请选择来访渠道</text>
        </view>
      </view>

      <view style="margin-bottom: 30rpx">
        <view class="label-form required-label">需求区间</view>
        <view class="content-select" @click="openIntervalRange" style="font-size: 30rpx;padding: 0 18rpx 20rpx 18rpx;box-sizing: border-box">
          <text v-if="formType.intervalRange" style="color:rgb(48, 49, 51)">{{formType.intervalRange}}</text>
          <text v-else style="color:rgb(192, 196, 204)">请选择需求区间</text>
        </view>
      </view>
      <view style="margin-bottom: 30rpx">
        <view class="label-form">首次带看房源</view>
        <u--textarea v-model="formType.firstView" :disabled="typeMode == 2" placeholder="请输入首次带看房源" border="bottom" autoHeight></u--textarea>
      </view>

<!--      来访渠道三个-->
      <view v-if="formType.customerSource == '第三方个人' || formType.customerSource == '政府资源' || formType.customerSource == '第三方中介'">
        <view style="margin-bottom: 30rpx">
          <view class="label-form required-label">{{formType.customerSource == '第三方中介' ? '所属经纪公司' : '所属公司'}}</view>
          <u--input
              :placeholder="formType.customerSource == '第三方中介' ? '请输入所属经纪公司' : '请输入第三方个人所属公司信息'"
              border="bottom"
              :disabled="typeMode == 2"
              clearable
              v-model="formType.companyName"
          ></u--input>
        </view>
        <view style="margin-bottom: 30rpx">
          <view class="label-form required-label">经纪人姓名</view>
          <u--input
              placeholder="请输入经纪人姓名"
              border="bottom"
              :disabled="typeMode == 2"
              clearable
              v-model="formType.brokerName"
          ></u--input>
        </view>
        <view style="margin-bottom: 30rpx">
          <view class="label-form required-label">经纪人电话</view>
          <u--input
              placeholder="请输入经纪人电话"
              border="bottom"
              :maxlength="11"
              :disabled="typeMode == 2"
              clearable
              v-model="formType.brokerPhone"
          ></u--input>
        </view>
        <view style="margin-bottom: 30rpx">
          <view class="label-form required-label">{{formType.customerSource == '第三方个人' ? '工作区域' : '主营区域'}}</view>
          <view class="content-select" @click="openMainBusiness" style="font-size: 30rpx;padding: 0 18rpx 20rpx 18rpx;box-sizing: border-box">
            <text v-if="formType.mainBusiness" style="color:rgb(48, 49, 51)">{{formType.mainBusiness}}</text>
            <text v-else style="color:rgb(192, 196, 204)">请选择{{formType.customerSource == '第三方个人' ? '工作区域' : '主营区域'}}</text>
          </view>
        </view>

        <view style="margin-bottom: 30rpx">
          <view class="label-form">最新带看时间</view>
          <view class="content-select" @click="openNewViewDate" style="font-size: 30rpx;padding: 0 18rpx 20rpx 18rpx;box-sizing: border-box">
            <text v-if="formType.newViewDate" style="color:rgb(48, 49, 51)">{{formType.newViewDate}}</text>
            <text v-else style="color:rgb(192, 196, 204)">请选择最新带看时间</text>
          </view>
        </view>

        <view style="margin-bottom: 30rpx" v-if="formType.customerSource != '第三方中介' && formType.customerSource != '第三方个人'">
          <view class="label-form">最新成交时间</view>
          <view class="content-select" @click="openNewDealDate" style="font-size: 30rpx;padding: 0 18rpx 20rpx 18rpx;box-sizing: border-box">
            <text v-if="formType.newDealDate" style="color:rgb(48, 49, 51)">{{formType.newDealDate}}</text>
            <text v-else style="color:rgb(192, 196, 204)">请选择最新成交时间</text>
          </view>
        </view>

        <view style="margin-bottom: 30rpx">
          <view class="label-form">创建时间</view>
          <u--input
              placeholder="由系统自动生成创建时间"
              border="bottom"
              :disabled="true"
              clearable
              v-model="formType.createTime"
          ></u--input>
        </view>
      </view>



      <view style="height: 120rpx;" v-if="typeMode != 2"></view>
    </view>
    <view v-if="typeMode != 2" style="position: fixed;bottom: 0;height: 120rpx;width: 100%;padding: 0 20rpx;box-sizing: border-box;background: #fff;justify-content: space-between"
    class="flex-row">
      <view style="width: 200rpx">
        <button type="primary" style="height: 50rpx;line-height: 50rpx;border-radius: 40rpx;font-size: 24rpx" @click="staging">暂存</button>
      </view>
      <view style="width: 200rpx">
        <button type="primary" style="height: 50rpx;line-height: 50rpx;border-radius: 40rpx;font-size: 24rpx" @click="submitSave">保存并提交</button>
      </view>
      <view style="width: 200rpx">
        <button type="primary" style="height: 50rpx;line-height: 50rpx;border-radius: 40rpx;font-size: 24rpx" @click="closeSubmit">取消</button>
      </view>
    </view>
    <u-picker :show="customerShow" :columns="customerTypeColumns" keyName="dictValue"
    @cancel="closeCustomerType" @confirm="confirmCustomerType" :defaultIndex="[defaultIndex]" cancelColor="#fb271b" @close="customerShow = false"
              cancelText="清除"
    :closeOnClickOverlay="true"></u-picker>
    <u-picker :show="projectNameSet.projectNameShow" :columns="projectNameSet.projectNameColumns" keyName="dictValue"
              @cancel="closeProjectName" @confirm="confirmProjectName" :defaultIndex="[projectNameSet.projectNameDefaultIndex]" cancelColor="#fb271b"
              cancelText="清除"
              :closeOnClickOverlay="true" @close="projectNameSet.projectNameShow = false"></u-picker>
    <u-picker :show="industrySet.industryShow" :columns="industrySet.industryColumns" keyName="dictValue"
              @cancel="closeIndustry" @confirm="confirmIndustry" :defaultIndex="[industrySet.industryDefaultIndex]" cancelColor="#fb271b"
              cancelText="清除"
              :closeOnClickOverlay="true" @close="customerSourceSet.industryShow = false"></u-picker>
    <u-picker :show="customerSourceSet.customerSourceShow" :columns="customerSourceSet.customerSourceColumns" keyName="dictValue"
              @cancel="closeCustomerSource" @confirm="confirmCustomerSource" :defaultIndex="[customerSourceSet.customerSourceDefaultIndex]" cancelColor="#fb271b"
              cancelText="清除"
              :closeOnClickOverlay="true" @close="customerSourceSet.customerSourceShow = false"></u-picker>

    <u-picker :show="intervalRangeSet.intervalRangeShow" :columns="intervalRangeSet.intervalRangeColumns" keyName="dictValue"
              @cancel="closeIntervalRange" @confirm="confirmIntervalRange" :defaultIndex="[intervalRangeSet.intervalRangeDefaultIndex]" cancelColor="#fb271b"
              cancelText="清除"
              :closeOnClickOverlay="true" @close="customerSourceSet.customerSourceShow = false"></u-picker>
    <u-picker :show="mainBusinessSet.mainBusinessShow" :columns="mainBusinessSet.mainBusinessColumns" keyName="dictValue"
              @cancel="closeMainBusiness" @confirm="confirmMainBusiness" :defaultIndex="[mainBusinessSet.mainBusinessDefaultIndex]" cancelColor="#fb271b"
              cancelText="清除"
              :closeOnClickOverlay="true" @close="customerSourceSet.customerSourceShow = false"></u-picker>

    <u-datetime-picker
        :show="showNewViewDate"
        v-model="NewViewDate"
        :closeOnClickOverlay="true"
        @close="showNewViewDate = false"
        @cancel="closeNewViewDate"
        mode="datetime"
        cancelColor="#fb271b"
        cancelText="清除"
        ref="picker"
        @confirm="confirmNewViewDate"
    ></u-datetime-picker>

    <u-datetime-picker
        :show="showNewDealDate"
        v-model="newDealDate"
        :closeOnClickOverlay="true"
        @close="showNewDealDate = false"
        @cancel="closeNewDealDate"
        mode="datetime"
        ref="picker1"
        cancelColor="#fb271b"
        cancelText="清除"
        @confirm="confirmNewDealDate"
    ></u-datetime-picker>

<!--    @close="close" @open="open"-->
    <u-popup :show="showPopup" mode="right" @close="closeShowPopup" :closeable="true">
      <view style="width: 600rpx;height:100%;overflow-y:scroll;padding: 0 20rpx;box-sizing: border-box">
        <view style="height: 20rpx"></view>
        <view style="font-size: 32rpx;font-weight: bold;text-align: center;">请选择跟进人员</view>
        <view style="height: 20rpx"></view>

        <view v-for="item in peopleList" :key="item.id">
          <view class="flex-row black-active" style="padding: 20rpx;box-sizing: border-box" @click="surePeople(item)">
            <view style="width: 100rpx;height: 100%">
              <text class="iconfont icon-xuanzhong" style="font-size: 42rpx"
                    :style="{color:formType.followBy == item.userId ? 'red' : '#eee'}"></text>
            </view>
            <view class="flex-row" style="flex: 1;justify-content: space-between">
              <view style="display: flex;flex-direction: column;align-items: center">
                <view style="color:rgb(192, 196, 204);font-size: 30rpx">用户昵称</view>
                <view>{{item.nickName}}</view>
              </view>
              <view style="display: flex;flex-direction: column;align-items: center">
                <view style="color:rgb(192, 196, 204);font-size: 30rpx">手机号码</view>
                <view>{{item.phonenumber}}</view>
              </view>
            </view>
          </view>
        </view>

      </view>
    </u-popup>
  </view>
</template>

<script>
import H5Navbar from "../../components/H5Navbar/index";
import {
  getDictList,
  addCustomer,
  getCustomerDetail,
  selectPeople,
  submitAddCustomer,
  getZanCunForm
} from '../../api/work/userManage'
import {formatDate} from '../../utils/index'
import {isMobile, isPhone} from "../../utils/verify";
export default {
  name: "MyCreateCustomer",
  data(){
    return {
      newDealDate:'',
      showNewDealDate:false,
      showNewViewDate:false,
      NewViewDate:'',
      title:'新建客户',
      customerShow:false,
      showPopup:false,
      customerTypeColumns:[[]],
      defaultIndex:0,
      projectNameSet:{ //项目名称
        projectNameShow:false,
        projectNameDefaultIndex:0,
        projectNameColumns:[[]]
      },
      customerSourceSet:{
        customerSourceShow:false,
        customerSourceDefaultIndex:0,
        customerSourceColumns:[[]],
      },
      industrySet:{
        industryShow:false,
        industryDefaultIndex:0,
        industryColumns:[[]],
      },
      intervalRangeSet:{
        intervalRangeShow:false,
        intervalRangeDefaultIndex:0,
        intervalRangeColumns:[[]]
      },
      mainBusinessSet:{
        mainBusinessShow:false,
        mainBusinessDefaultIndex:0,
        mainBusinessColumns:[[]]
      },
      formType:{
        id:'',
        status:'草稿',//客户状态
        projectName:'',//项目名称
        followBy:'',//跟进人
        followByName:'',
        customerName:'',//客户名称
        customerType:'',//客户类型
        customerIndustry:'',//客户行业
        customerContact:'',//联系人
        customerPhone:'',//联系电话
        customerSource:'',//来访渠道
        intervalRange:'',//需求区间
        firstView:'',//首次带看房源
        companyName:'',//所属公司名称
        brokerName:'',//经纪人姓名
        brokerPhone:'',//经纪人电话
        mainBusiness:'',//主营区域
        newViewDate:'',//最新带看时间
        newDealDate:'',//最新成交时间
        createTime:'',//创建时间
      },
      typeMode:0,
      peopleList:[]
    }
  },
  components:{
    H5Navbar
  },
  onLoad(options){
    this.typeMode = options.mode
    if(options.mode == 2){
      this.title = '查看详情'
      getCustomerDetail(options.id).then(res => {
        console.log(res,'res')
        if(res.code == 200){
          Object.assign(this.formType,{
            ...res.data
          })

        }
      })
    }
    else if(options.mode == 1){
      this.title = '编辑客户'
      getCustomerDetail(options.id).then(res => {
        if(res.code == 200){
          Object.assign(this.formType,{
            ...res.data
          })

        }
      })
    }
    else{
      this.title = '新建客户'
      getZanCunForm().then(res => {
        if(res.code == 200){
          Object.assign(this.formType,{
            ...res.data
          })
          this.formType.status = '草稿'
          this.getInfo()
        }
      })


    }



    getDictList('cust_type').then(res => {
      this.customerTypeColumns.splice(0,1,[...res.rows])
    })
    getDictList('industry').then(res => {
      this.industrySet.industryColumns.splice(0,1,[...res.rows])
    })
    getDictList('visiting_channel').then(res => {
      this.customerSourceSet.customerSourceColumns.splice(0,1,[...res.rows])
    })
    getDictList('project_name').then(res => {
      this.projectNameSet.projectNameColumns.splice(0,1,[...res.rows])
    })
    getDictList('demand_interval').then(res => {
      this.intervalRangeSet.intervalRangeColumns.splice(0,1,[...res.rows])
    })
    getDictList('main_area').then(res => {
      this.mainBusinessSet.mainBusinessColumns.splice(0,1,[...res.rows])
    })
    selectPeople({deptId:100}).then(res => {
      if(res.code == 200){
        this.peopleList = res.rows
      }
    })
  },
  methods:{
    getInfo () {
      const app = this
      app.$store.dispatch('Info').then(res => {
        console.log(res,'res')
        this.formType.followBy = res.user.userId
        this.formType.followByName = res.user.nickName
        app.user = res.user
      })
    },
    openProjectName(){
      if(this.typeMode == 2) return
      this.projectNameSet.projectNameShow = true
    },
    openCustomerType(){
      if(this.typeMode == 2) return
      this.customerShow = true
    },
    openIndustry(){
      if(this.typeMode == 2) return
      this.industrySet.industryShow = true
    },
    openCustomerSource(){
      if(this.typeMode == 2) return
      this.customerSourceSet.customerSourceShow = true
    },

    openIntervalRange(){
      if(this.typeMode == 2) return
      this.intervalRangeSet.intervalRangeShow = true
    },
    openMainBusiness(){
      if(this.typeMode == 2) return
      this.mainBusinessSet.mainBusinessShow = true
    },
    closeProjectName(){
      this.projectNameSet.projectNameDefaultIndex = 0
      this.formType.projectName = ''
      this.projectNameSet.projectNameShow = false
    },
    closeIndustry(){
      this.industrySet.industryDefaultIndex = 0
      this.formType.customerIndustry = ''
      this.industrySet.industryShow = false
    },
    closeCustomerSource(){
      this.customerSourceSet.customerSourceDefaultIndex = 0
      this.formType.customerSource = ''
      this.customerSourceSet.customerSourceShow = false
    },
    closeIntervalRange(){
      this.intervalRangeSet.intervalRangeDefaultIndex = 0
      this.formType.intervalRange = ''
      this.intervalRangeSet.intervalRangeShow = false
    },
    closeMainBusiness(){
      this.mainBusinessSet.mainBusinessDefaultIndex = 0
      this.formType.mainBusiness = ''
      this.mainBusinessSet.mainBusinessShow = false
    },
    closeCustomerType(){
      this.defaultIndex = 0
      this.formType.customerType = ''
      this.customerShow = false
    },
    confirmCustomerType(value){
      this.defaultIndex = value.indexs[0]
      this.formType.customerType = value.value[0].dictValue
      this.customerShow = false
    },
    confirmProjectName(value){
      this.projectNameSet.projectNameDefaultIndex = value.indexs[0]
      this.formType.projectName = value.value[0].dictValue
      this.projectNameSet.projectNameShow = false
    },
    confirmIndustry(value){
      this.industrySet.industryDefaultIndex = value.indexs[0]
      this.formType.customerIndustry = value.value[0].dictValue
      this.industrySet.industryShow = false
    },
    confirmCustomerSource(value){
      this.customerSourceSet.customerSourceDefaultIndex = value.indexs[0]
      this.formType.customerSource = value.value[0].dictValue
      this.customerSourceSet.customerSourceShow = false
    },
    confirmIntervalRange(value){
      this.intervalRangeSet.intervalRangeDefaultIndex = value.indexs[0]
      this.formType.intervalRange = value.value[0].dictValue
      this.intervalRangeSet.intervalRangeShow = false
    },
    confirmMainBusiness(value){
      this.mainBusinessSet.mainBusinessDefaultIndex = value.indexs[0]
      this.formType.mainBusiness = value.value[0].dictValue
      this.mainBusinessSet.mainBusinessShow = false
    },
    openFollowByName(){
      this.showPopup = true
    },
    closeShowPopup(){
      this.showPopup = false
    },
    //暂存
    staging(){
      addCustomer(this.formType).then(res => {
        if(res.code == 200){
          this.$tipInfo('新建成功',()=>{
            uni.redirectTo({
              url:'/pages/work/customer/MyCreateCust'
            })
          })
        }
        else{
          this.$tipInfo(res.msg || '系统错误，请稍后再试！')
        }
      })
    },
    //提交表单
    submitSave(){
      if(!this.formType.projectName) return this.$tipInfo('请填写项目名称')
      else if(!this.formType.followByName) return this.$tipInfo('请选择跟进人')
      else if(!this.formType.customerName) return this.$tipInfo('请填写客户名称')
      else if(!this.formType.customerType) return this.$tipInfo('请选择客户类型')
      else if(!this.formType.customerIndustry) return this.$tipInfo('请选择客户行业')
      else if(!this.formType.customerContact) return this.$tipInfo('请填写联系人')
      else if(!this.formType.customerPhone) return this.$tipInfo('请填写联系人电话')
      else if(!isPhone(this.formType.customerPhone))  return this.$tipInfo('请填写有效的联系人电话')
      else if(!isMobile(this.formType.customerPhone))  return this.$tipInfo('请填写有效的联系人电话')
      else if(!this.formType.customerSource) return this.$tipInfo('请选择来访渠道')
      else if(!this.formType.intervalRange) return this.$tipInfo('请选择需求区间')
      if(this.formType.customerSource == '第三方个人' || this.formType.customerSource == '政府资源' || this.formType.customerSource == '第三方中介'){
        if(!this.formType.companyName) return this.$tipInfo('请填写所属公司')
        else if(!this.formType.brokerName) return this.$tipInfo('请填写经纪人姓名')
        else if(!this.formType.brokerPhone) return this.$tipInfo('请填写经纪人电话')
        else if(!isPhone(this.formType.brokerPhone))  return this.$tipInfo('请填写有效的经纪人电话')
        else if(!isMobile(this.formType.brokerPhone))  return this.$tipInfo('请填写有效的经纪人电话')
        else if(!this.formType.mainBusiness) {
          if(this.formType.customerSource == '第三方个人') return this.$tipInfo('请选择工作区域')
          return this.$tipInfo('请选择主营区域')
        }
      }
      submitAddCustomer(this.formType).then(res => {
        console.log(res,'res-res')
        if(res.code == 200){
          this.$tipInfo('新建成功',()=>{
            uni.redirectTo({
              url:'/pages/work/customer/MyCreateCust'
            })
          })
        }
        else{
          this.$tipInfo(res.msg || '系统错误，请稍后再试！')
        }
      })
    },
    surePeople(item){
      this.formType.followByName = item.nickName
      this.formType.followBy = item.userId
    },

    closeSubmit(){
      uni.redirectTo({
        url:'/pages/work/customer/MyCreateCust'
      })
    },
    openNewViewDate(){
      this.showNewViewDate = true
      if(this.formType.newViewDate){
        this.$refs.picker.innerValue=new Date(this.formType.newViewDate).getTime()
      }
      else{
        this.$refs.picker.innerValue=new Date().getTime()
      }

    },
    confirmNewViewDate(options){
      this.formType.newViewDate = formatDate('dateSet',new Date(options.value),'-')
      this.NewViewDate = Number(new Date(options.value))
      this.showNewViewDate = false
    },
    closeNewViewDate(){
      this.formType.newViewDate = ''
      this.NewViewDate = ''
      this.showNewViewDate = false
    },

    openNewDealDate(){
      this.showNewDealDate = true
      if(this.formType.newDealDate){
        this.$refs.picker1.innerValue=new Date(this.formType.newDealDate).getTime()
      }
      else{
        this.$refs.picker1.innerValue=new Date().getTime()
      }
    },
    confirmNewDealDate(options){
      this.formType.newDealDate = formatDate('dateSet',new Date(options.value),'-')
      this.newDealDate = Number(new Date(options.value))
      this.showNewDealDate = false
    },
    closeNewDealDate(){
      this.formType.newDealDate = ''
      this.newDealDate = ''
      this.showNewDealDate = false
    },
  }
}
</script>

<style scoped lang="scss">
.label-form{
  font-weight: 400;
  font-size: 28rpx;
  color: #222222;
  text-align: left;
  margin-bottom: 10rpx;
}

.content-select{
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #dadbde ;
}

.required-label{
  &::before{
    content: '*';
    color: red;
    position: relative;
    top: -4rpx;
    left: -4rpx;
  }
}

.black-active{
  width: 100%;
  border-radius: 20rpx;
  background: #fff;
  box-shadow: 0 3rpx 30rpx 0 #D5D0D07F;
  margin-bottom: 26rpx
}
</style>
